<template>
  <div >
    <van-col span="12">
      <div id="card-container" @click="toClickBt">
        <div id="imageHot" >
          <img :src="cardItems.thumb">
          <!--文字hot-->
          <!--          <span>{{info}}</span>-->
        </div>
        <!--产品信息描述-->
        <div>
          <!--          <div class="produce-title">{{card.title}}</div>-->
          <div class="produce-title">{{cardItems.title}}</div>
          <div class="produce-describe">{{detail}}</div>
        </div>
        <div id="money">
          <span id="new">￥{{cardItems.price}}</span>
          <span id="old">￥{{cardItems.price}}</span>
        </div>
      </div>
    </van-col>
  </div>
<!--    <div id="card-container" @click="toClickBt">-->
<!--      &lt;!&ndash;      <van-col span="12">&ndash;&gt;-->
<!--      <div id="imageHot" >-->
<!--        <img :src="cardItems.thumb">-->
<!--      </div>-->
<!--      &lt;!&ndash;产品信息描述&ndash;&gt;-->
<!--      <div>-->
<!--        &lt;!&ndash;          <div class="produce-title">{{card.title}}</div>&ndash;&gt;-->
<!--        <div class="produce-title">{{cardItems.title}}</div>-->
<!--        <div class="produce-describe">{{detail}}</div>-->
<!--      </div>-->
<!--      <div id="money">-->
<!--        <span id="new">￥{{cardItems.price}}</span>-->
<!--        <span id="old">￥{{cardItems.price}}</span>-->
<!--      </div>-->
<!--    </div>-->
</template>

<script>
import { Row, Col } from 'vant'
export default {
  name: 'tab-cardshow',
  components: {
    [Col.name]: Col,
    [Row.name]: Row
  },
  data () {
    return {
      image: '@/assets/logo.png',
      info: 'hot',
      // title: '减肥的秘密',
      detail: '酒精代谢能力'
    }
  },
  // 父组件传给子组件就要用这个方法
  // 此处从tabhome接收了cardItems
  props: {
    cardItems: {
      type: Object
    }
  },
  methods: {
    toClickBt () {
      console.log('点击事件（子组件）')
      //  子组件可以使用 $emit 触发父组件的自定义事件->toClictBt。
      // 从父组件传过来的
      this.$emit('toClickBt', '子组件参数')
    }
  }
}
</script>

<style scoped lang="less">
  #card-container{
    background-color: #fafafa;
    width: 90%;
    height: auto;
    /*margin-bottom: 5px;*/
    margin: 10px;
    /*border-radius: 10px;*/
  }
  /*上半部分的图片*/
  #imageHot{
    /*background-image: url('../../assets/images/produce1.png');*/
    position: relative;
    padding-top: 10px;
    height: 150px;
    /*width: 150px;*/
    width: 95%;
    padding-left: 5px;
    border-radius: 15px;
    background-repeat:no-repeat;
    /*可以让图片铺满整个屏幕*/
    background-size: 100% 100%;
    img{
      width: 100%;
      height: 100%;
      /*padding: 10px;*/
      /*padding-left: 10px;*/
      border-radius: 15px;
    }
    span{
      /*position: absolute;*/
      /*!*right: 0px;*!*/
      /*!*距离上面和左边的距离*!*/
      /*left: 125px;*/
      /*top: 20px;*/
      color:white;
      float: right;
      /*top: 0px;*/
      background-color: rgba(50,50,51,.88);
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 10px 0 0 10px;
    }
  }
  /*下半部分图片描述*/
  /*标题*/
  .produce-title{
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
  }
  .produce-describe{
    word-break:break-all;
    padding-left: 10px;
    margin: 0px;
    color: #969799;
    font-size: 13px;
  }
  #money{
    padding-top: 5px;
    #new{
      color: red;
      padding-left: 5px;
      font-size: 17px;
    }
    #old{
      color: #c8c9cc;
      font-size: 13px;
      text-decoration:line-through //显示出灰色线
    }
  }
</style>
